<template>
	<div>
		<my-form :model="formData" :formItem="formItem" label-width="110" ref="formRef">
			<template #executionListener>
				<el-badge :value="executionListenerLength">
					<el-button @click="dialogExecutionListener = true">编辑</el-button>
				</el-badge>
			</template>
			<template #taskListener>
				<el-badge :value="taskListenerLength">
					<el-button @click="dialogTaskListener = true">编辑</el-button>
				</el-badge>
			</template>
			<template #multiInstance>
				<el-badge :is-dot="hasMultiInstance">
					<el-button @click="dialogHasMultiInstance = true">编辑</el-button>
				</el-badge>
			</template>
			<template #assignee="{ model, prop }">
				<my-dept-user-select v-model="model[prop]" placeholder="请选择指定人员" />
			</template>
			<template #candidateUsers="{ model, prop }">
				<my-dept-user-select v-model="model[prop]" placeholder="请选择候选用户" multiple collapse-tags collapse-tags-tooltip />
			</template>
			<!-- <template #candidateGroups>
							<el-input placeholder="请选择候选角色" class="input-with-select" v-model="checkValues">
									<template slot="append">
									
											<el-button style="padding-left: 7px" icon="el-icon-user" @click="multipleRoleCheck" />
											<el-divider direction="vertical"></el-divider>
											
											<el-button style="padding-right: 7px" icon="el-icon-postcard" @click="singleExpCheck('candidateGroups')" />
									</template>
							</el-input>
					</template> -->
		</my-form>

		<executionListenerDialog v-model="dialogExecutionListener" :element="element" :modeler="modeler" @close="finishExecutionListener" />
		<taskListenerDialog v-model="dialogTaskListener" :element="element" :modeler="modeler" @close="finishTaskListener" />
		<multiInstanceDialog v-model="dialogHasMultiInstance" :element="element" :modeler="modeler" @close="finishMultiInstance" />
	</div>
</template>

<script setup>
import executionListenerDialog from './property/executionListener';
import taskListenerDialog from './property/taskListener';
import multiInstanceDialog from './property/multiInstance';
import { commonParse, userTaskParse } from '../common/parseElement';
import { StrUtil } from '@/utils/StrUtil';
import hooksPanel, { PanelProps } from '../common/Panel';

let formRef = shallowRef(null);

const props = defineProps({
		...PanelProps,
		users: {
			type: Array,
			required: true
		},
		groups: {
			type: Array,
			required: true
		},
		exps: {
			type: Array,
			required: true
		}
	}),
	userTypeOption = [
		{ label: '指定人员', value: 'assignee' },
		{ label: '候选人员', value: 'candidateUsers' }
		// { label: '候选角色', value: 'candidateGroups' },
	];

const formItem = computed(() => [
	{
		prop: 'id',
		label: '节点 id',
		required: true
	},
	{
		prop: 'name',
		label: '节点名称',
		required: true
	},
	{
		prop: 'documentation',
		label: '节点描述'
	},
	{
		prop: 'executionListener',
		label: '执行监听器'
	},
	{
		prop: 'taskListener',
		label: '任务监听器',
		if: !!showConfig.value.taskListener
	},
	{
		itemType: 'select',
		prop: 'userType',
		label: '用户类型',
		list: userTypeOption,
		fileType: { label: 'label', value: 'value' },
		if: !!showConfig.value.userType
	},
	{
		prop: 'assignee',
		label: '指定人员',
		if: !!showConfig.value.assignee && formData.value.userType === 'assignee'
	},
	{
		prop: 'candidateUsers',
		label: '候选人员',
		if: !!showConfig.value.candidateUsers && formData.value.userType === 'candidateUsers'
	},
	// {
	//     prop: 'candidateGroups',
	//     label: '候选角色',
	//     if: !!showConfig.value.candidateGroups && formData.value.userType === 'candidateGroups',
	// },
	{
		prop: 'multiInstance',
		label: '多实例'
	},
	{
		itemType: 'switch',
		prop: 'async',
		label: '异步',
		activeText: '是',
		inactiveText: '否',
		if: !!showConfig.value.async
	},
	{
		prop: 'priority',
		label: '优先级',
		if: !!showConfig.value.priority
	},
	{
		prop: 'skipExpression',
		label: '跳过表达式',
		if: !!showConfig.value.skipExpression
	},
	{
		itemType: 'switch',
		prop: 'isForCompensation',
		label: '是否为补偿',
		activeText: '是',
		inactiveText: '否',
		if: !!showConfig.value.isForCompensation
	},
	{
		itemType: 'switch',
		prop: 'triggerable',
		label: '服务任务可触发',
		activeText: '是',
		inactiveText: '否',
		if: !!showConfig.value.triggerable
	},
	{
		itemType: 'switch',
		prop: 'autoStoreVariables',
		label: '自动存储变量',
		activeText: '是',
		inactiveText: '否',
		if: !!showConfig.value.autoStoreVariables
	},
	{
		prop: 'ruleVariablesInput',
		label: '输入变量',
		if: !!showConfig.value.ruleVariablesInput
	},
	{
		prop: 'rules',
		label: '规则',
		if: !!showConfig.value.rules
	},
	{
		prop: 'resultVariable',
		label: '结果变量',
		if: !!showConfig.value.resultVariable
	},
	{
		itemType: 'switch',
		prop: 'exclude',
		label: '排除',
		activeText: '是',
		inactiveText: '否',
		if: !!showConfig.value.exclude
	},
	{
		prop: 'class',
		label: '类',
		if: !!showConfig.value.class
	},
	{
		itemType: 'date',
		prop: 'dueDate',
		label: '到期时间',
		type: 'datetime',
		valueFormat: 'yyyy-MM-ddTHH:mm:ss',
		if: !!showConfig.value.dueDate
	}
]);

const {
	showConfig,
	formData,
	dialogExecutionListener,
	executionListenerLength,
	updateProperties,
	finishExecutionListener,
	computedExecutionListenerLength
} = hooksPanel(props);

formData.value = userTaskParse(commonParse(props.element));
computedExecutionListenerLength();

watch(
	() => formData.value.userType,
	(val, oldVal) => {
		if (StrUtil.isNotBlank(oldVal)) {
			delete props.element.businessObject.$attrs[`flowable:${oldVal}`];
			delete formData.value[oldVal];

			// 删除xml中已选择数据类型节点
			// delete props.element.businessObject.$attrs[`flowable:dataType`];

			updateProperties({ 'flowable:dataType': 'fixed' });
		}
		// 写入userType节点信息到xml
		updateProperties({ 'flowable:userType': val });
	}
);
watch(
	() => formData.value.formKey,
	(val) => {
		if (StrUtil.isNotBlank(val)) {
			updateProperties({ 'flowable:formKey': val });
		} else {
			// 删除xml中已选择表单信息
			delete props.element.businessObject[`formKey`];
		}
	}
);
watch(
	() => formData.value.skipExpression,
	(val) => {
		if (StrUtil.isNotBlank(val)) {
			updateProperties({ 'flowable:skipExpression': val });
		} else {
			delete props.element.businessObject.$attrs[`flowable:skipExpression`];
		}
	}
);
watch(
	() => formData.value.assignee,
	(val) => {
		deleteFlowAttar();
		if (StrUtil.isNotBlank(val)) {
			updateProperties({ 'flowable:assignee': val });
		}
	}
);
watch(
	() => formData.value.candidateUsers,
	(val) => {
		deleteFlowAttar();
		if (val) {
			updateProperties({ 'flowable:candidateUsers': val.join(',') });
		}
	}
);

// 删除节点
function deleteFlowAttar() {
	delete props.element.businessObject.$attrs[`flowable:dataType`];
	delete props.element.businessObject.$attrs[`flowable:assignee`];
	delete props.element.businessObject.$attrs[`flowable:candidateUsers`];
	delete props.element.businessObject.$attrs[`flowable:candidateGroups`];
}

[
	'async',
	'dueDate',
	'priority',
	'isForCompensation',
	'triggerable',
	'class',
	'autoStoreVariables',
	'exclude',
	'ruleVariablesInput',
	'rules',
	'resultVariable'
].forEach((key) => {
	watch(
		() => formData.value[key],
		(val) => {
			if (StrUtil.isNotBlank(val)) updateProperties({ [`flowable:${key}`]: val });
		}
	);
});

const dialogTaskListener = ref(false),
	taskListenerLength = ref(0);

computedTaskListenerLength();

function computedTaskListenerLength() {
	taskListenerLength.value =
		props.element.businessObject.extensionElements?.values?.filter((item) => item.$type === 'flowable:TaskListener').length ?? 0;
}
function finishTaskListener() {
	computedTaskListenerLength();
	dialogTaskListener.value = false;
}

const dialogHasMultiInstance = ref(false),
	hasMultiInstance = ref(false);

computedHasMultiInstance();

function computedHasMultiInstance() {
	if (props.element.businessObject.loopCharacteristics) {
		hasMultiInstance.value = true;
	} else {
		hasMultiInstance.value = false;
	}
}
function finishMultiInstance() {
	computedHasMultiInstance();
	dialogHasMultiInstance.value = false;
}

defineExpose({
	childValidate: async () => {
		return await formRef.value?.$refs?.refMyForm?.validate();
	}
});
</script>
